<!--
 * @Author: cgl
 * @Date: 2023-07-20 09:36:04
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-12 10:02:35
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\components\Signature1\draw.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved. 
-->
<template>
  <div class="draw-container" :id="stamp"
    :style="{
      'left': `${place_x}px`,
      'top': `${place_y}px`
    }"
  >
    <div
      v-if="box.commonSealType != '2' && box.commonSealType != 'hands'"
      class="draw-box"
			:draggable="false"
    >
      <div :class="['close', place_y < 20 ? 'bottom' : '']">
        <i class="el-icon-error" @click="deleteBox"></i>
      </div>
      <div class="point"></div>
			
      <div class="box" :style="{
        'width': `${width}px`,
        'height': `${height}px`,
				'fontSize': `${box.sealType == '0' && 10}px`,
      }">
				<span v-if="getTypeName(box) == 'other'">点击<br/>签署</span>
				<span v-else style="font-size: 16px; line-height: 0">{{getTypeName(box)}}</span>
			</div>
    </div>

    <div
      v-if="box.commonSealType == '2'"
      class="draw-box slit"
			:draggable="false"
    >
      <div :class="['close', place_y < 40 ? 'bottomslitclose' : '']">
        <i class="el-icon-error" @click="deleteBox"></i>
      </div>
			
      <div class="box" :style="{
        'width': `${width}px`,
        'height': `${height}px`
      }">骑<br/>缝<br/>章</div>
    </div>

    <div
      v-if="box.commonSealType == 'hands'"
      class="draw-box"
			:draggable="false"
    >
      <div :class="['close', place_y < 20 ? 'bottom' : '']">
        <i class="el-icon-error" @click="deleteBox"></i>
      </div>
			
			<img :draggable="false" :style="{
				'width': `${width}px`,
				'height': `${height}px`
			}" class="signhandsimg" :src="box.img">
    </div>
  </div>
</template>

<script>
export default {
  name: 'drawContainer',
  props: {
    canvasInfo: { /* canvas位置信息 */
      type: Object,
      default: () => {}
    },
    box: { /* 方块信息 */
      type: Object,
      default: () => {}
    },
    scale: { /* 缩放系数 */
      type: [String, Number],
      default: 1
    },
    commonSealTypeDictList: { /* 私章类型字典数据 */
      type: Array,
      default: [],
    },
  },
  data() {
    return {
			stamp: null,
			lock: false,
			dh: 70, /* 生成框公章大小 */
			place_x: 0, /* 定位位置 */
			place_y: 0, /* 定位位置 */
    }
  },
  computed: {
		// 生成框宽
    width() {
			let w;
			if (this.box.commonSealType == "2") { /* 骑缝章 */
        w = 8;
      }else if (this.box.commonSealType == "hands") {
        w = 150;
			}else {
				if(this.box.sealType == "0") { /* 私章 */
					w = 60;
				}else {
					w = this.dh;
				}
      }
			return w * this.scale;
    },
		// 生成框高
    height() {
			let h;
			if (this.box.commonSealType == "2") { /* 骑缝章 */
        h = this.dh;
      }else if (this.box.commonSealType == "hands") {
        h = 50;
			}else {
				if(this.box.sealType == "0") { /* 私章 */
					h = 30;
				}else {
					h = this.dh;
				}
      }
			return h * this.scale;
    },
		// 印章类型
		getTypeName() {
			return (value) => {
				let findObj = this.commonSealTypeDictList.find(item => item.dictValue == value.commonSealType)
				if(findObj) {
					if(findObj.dictLabel == "其他") {
						return "other"
					}else {
						return findObj.dictLabel;
					}
				}else {
					return "other"
				}
			}
		}
  },
  watch: {
    "box.position": {
      handler(val) {
        if (val) {
					this.stamp = this.box.id; /* 重新赋值 不然id不变 */
				}
      },
      immediate: true,
      deep: true,
    }
  },
  created() {
		this.adjust();
		this.stamp = this.box.id;
		this.$nextTick(() => {
			let dragDom = document.getElementById(this.stamp);
			dragDom.style.cursor = 'move';
			if(this.box.transferInfo.to) {
				this.mouseEvent(true);
			}else {
				// 按下事件
				dragDom.onmousedown = (e) => {
					this.mouseEvent(false, e);
				}
			}
		})
  },
  methods: {
		// 处于边界的进行调整
		adjust() {
			let {clientWidth, clientHeight, offsetLeft, offsetTop} = this.canvasInfo;
			let borderLeft = this.box.position.position_x - this.width / 2;
			let borderRight = this.box.position.position_x + this.width / 2;
			if(this.box.commonSealType == "2") {
				this.place_x =  offsetLeft + clientWidth - 4 * this.scale;
			}else {
				if(borderLeft < offsetLeft) {
					this.place_x = offsetLeft;
				}else if(borderRight > offsetLeft + clientWidth) {
					this.place_x = offsetLeft + clientWidth - this.width;
				}else {
					this.place_x = borderLeft;
				}
			}

			let borderTop = this.box.position.position_y - this.height / 2;
			let borderBottom = this.box.position.position_y + this.height / 2;
			if(borderTop < offsetTop) {
				this.place_y = offsetTop;
			}else if(borderBottom > offsetTop + clientHeight) {
				this.place_y = offsetTop + clientHeight - this.height;
			}else {
				this.place_y = borderTop;
			}
			if(this.place_y != borderTop || (this.place_x != borderLeft &&  this.box.commonSealType != "2")) {
				this.update(); /* 回显不更新 */
			}
		},
		mouseEvent(isTransfer, event) {
			let dragDom = document.getElementById(this.stamp);
			dragDom.style.cursor = 'move';
			console.dir(dragDom);
			let {clientWidth, clientHeight, offsetLeft, offsetTop} = this.canvasInfo /* canvas距父级元素距离 */
			let oriX = this.place_x;
			let oriY = this.place_y;
			let _this = this;
			// 按下的位置 距离最大窗口的位置
			let enterX;
			let enterY;
			let offsetY;
			if(isTransfer) {
				enterX = this.box.transferInfo.beginX;
				enterY = this.box.transferInfo.beginY;
			}else {
				enterX = event.clientX;
				enterY = event.clientY;
				offsetY = event.offsetY;
			}

			// 鼠标拖动事件
			document.onmousemove = function (e) {
				if(isTransfer && !_this.lock) {
					if(_this.box.transferInfo.to == "top") {
						offsetY = 1;
					}else {
						offsetY = 5;
					}
					_this.lock = true;
				}
				// 拖动的距离
				let disX = e.clientX - enterX;
				let disY = e.clientY - enterY;

				if (oriX + disX - offsetLeft <= 0) {
					_this.place_x = offsetLeft;
				}else if(oriX + disX - offsetLeft + _this.width >= clientWidth) {
					_this.place_x = offsetLeft + clientWidth - _this.width;
				}else {
					_this.place_x = oriX + disX;
				}

				if (oriY + disY - offsetTop <= 0) { /* 向上穿梭 */
					if(oriY + disY - offsetTop <= -(offsetY + _this.height + _this.canvasInfo.bottomHeight -3) &&
							_this.box.commonSealType != "2" &&
							_this.box.transferInfo.permitTo != 2) { /* 超出canvas顶部距离 */
						_this.$emit("transfer", {
							to: "top",
							position_x: _this.place_x + _this.width / 2,
							beginX: e.clientX,
							beginY: e.clientY,
							height: _this.height,
						})
						document.onmousemove = null;
					}
					_this.place_y = offsetTop;
				}else if(oriY + disY - offsetTop >= clientHeight - _this.height) { /* 向下穿梭 */
					if((oriY + disY - offsetTop) + _this.height - clientHeight >= (_this.canvasInfo.bottomHeight + _this.height - offsetY +3 * _this.scale) &&
							_this.box.commonSealType != "2" &&
							_this.box.transferInfo.permitTo != 1) { /* 超出canvas底部距离 */
						_this.$emit("transfer", {
							to: "bottom",
							position_x: _this.place_x + _this.width / 2,
							beginX: e.clientX,
							beginY: e.clientY,
						})
						document.onmousemove = null;
					}
					_this.place_y = offsetTop + clientHeight - _this.height;
				}else {
					_this.place_y = oriY + disY;
				}
			};
			// 松开鼠标
			document.onmouseup = function (e) {
				document.onmousemove = null;
				document.onmouseup = null;
				if(_this.box.commonSealType == "2") {
					let {clientWidth, clientHeight, offsetLeft, offsetTop} = _this.canvasInfo /* canvas距父级元素距离 */
					_this.place_x = offsetLeft + clientWidth - 4 * _this.scale;
				}
				_this.update();
				if(_this.box.transferInfo.to) {
					_this.box.transferInfo.isTransfer = false;
					// 按下事件
					dragDom.onmousedown = (e) => {
						_this.mouseEvent(false, e);
					}
				}
			};
		},
		// 更新坐标
		update() {
			this.$emit("update",{
				position_x: this.place_x + this.width / 2,
				position_y: this.place_y + this.height / 2,
			})
		},
    deleteBox() {
      this.$emit('deleteBox')
    },
    editBox() {
      this.$emit('editBox')
    }
  }
}
</script>

<style lang="scss" scoped>
  .draw-container {
    position: absolute;
    .draw-box {
      position: relative;
			opacity: 0.5;
      .edit {
        position: absolute;
        display: flex;
        align-items: center;
        height: 20px;
        top: -20px;
				right: 20px;
        cursor: pointer;
				color: red;
				font-size: 20px;
      }
      .close {
        position: absolute;
        display: flex;
        align-items: center;
        height: 20px;
        top: -20px;
				right: -1px;
        cursor: pointer;
				color: red;
				font-size: 20px;
      }
			.bottom {
				top: auto;
				bottom: -20px;
			}
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffd86e;
				color: #2d2d2d;
				font-size: 16px;
				user-select: none;
      }
    }
		.slit {
      .edit {
        top: -10px;
				left: -10px;
      }
      .close {
        top: -30px;
				left: -10px;
      }
      .box {
				justify-content: flex-start;
      }
			.bottomslitedit {
				top: auto;
				left: auto;
        bottom: -37px;
				right: -13px;
			}
			.bottomslitclose {
				top: auto;
				left: auto;
        bottom: -17px;
				right: -13px;
			}

		}
  }
	.animation {
		animation: spin .3s linear;
		animation-delay: .2s;
	}

	@keyframes spin {
		25% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		75% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.point {
		display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 2px solid red;
    margin-top: -4px;
    margin-left: -4px;
    width: 6px;
    height: 6px;
    z-index: 10001;
	}
	.signhandsimg {
		border: 1px solid #000;
	}
</style>